<template>
	<view>
		<view class="one">
			<view class="two1" :class="{two1bian:items.two1bian}" v-for="(items,index) in sum" :key="index"
				@click="two1_two2(items,index)">{{items.name}}</view>
		</view>
		<view class="two2" v-if="sum.length!==0">
			<view class="two2_1" v-for="(item,index2) in sum[dataindex]['onefen']" :key="index2"
				@click="two2_two3(dataindex,item,index2)">
				<view clsaa="two2_2" v-if="item.twofen=='情绪'" :class="{two2bian:item.two2bian}">
					<img src="../../static/icon/emotion.png">
				</view>
				<view clsaa="two2_2" v-if="item.twofen=='生活'" :class="{two2bian:item.two2bian}">
					<img src="../../static/icon/life.png">
				</view>
				<view clsaa="two2_2" v-if="item.twofen=='哺乳'" :class="{two2bian:item.two2bian}">
					<img src="../../static/icon/lactation.png">
				</view>
				<view clsaa="two2_2" v-if="item.twofen=='宝宝护理'" :class="{two2bian:item.two2bian}">
					<img src="../../static/icon/Parenting.png">
				</view>
				{{item.twofen}}
			</view>

			<view class="two2_1">
				<view clsaa="two2_2">
					<img src="../../static/icon/motion.png">
				</view>
				运动
			</view>
			<view class="two2_1">
				<view clsaa="two2_2">
					<img src="../../static/icon/healthPreservation.png">
				</view>
				养生
			</view>

		</view>


		<view v-for="(itemf,strindex) in sum[dataindex]['onefen'][strindex]['str']" :key="strindex"
			@click="cs(sum[dataindex]['onefen'][0]['str'])" :class="strindex%2==0?'three':'three0'">
			<!-- <view class="three1" v-if="strindex%2==0">
				<view class="three1_1">{{itemf.threename}}</view>
				<view class="three1_2">
					<view class="three1_2_1 right">
						<image src="../../static/img/happy1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="three1" v-if="strindex%2==1">
				<view class="three1_2">
					<view class="three1_2_1 left">
						<image src="../../static/img/happy2.png" mode="widthFix"></image>
					</view>
				</view> -->
			<!-- <view class="three1_2"><img src="../../static/icon/back1.png" alt=""></view> -->
			<view class="three1_1">
				{{itemf.threename}}
			</view>

			<!-- </view> -->
			<view :class="show[strindex]==true?'three2':'three3'">
				<span>{{itemf.threestr}}</span>
			</view>
			<view v-show="show[strindex]" @click="handleFold(strindex)" class="three4"><img
					src="../../static/icon/open.png"></view>
			<view v-show="!show[strindex]" @click="handleFold(strindex)" class="three4"><img
					src="../../static/icon/PutAway.png"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataindex: 0,
				strindex: 0,
				sum: [],
				// show: true,
				show: [true, true, true, true, true]
			}
		},
		methods: {
			two1_two2(items, index) {
				let p;
				for (p of this.sum) {
					p.two1bian = false;
				}
				items.two1bian = true;
				this.dataindex = index;
				this.strindex = 0; //二级索引重置
				let t;
				for (t of this.sum) { //一级索引跳转后，二级索引初始化
					let s;
					for (s of t.onefen) {
						s.two2bian = false;
					}
					t.onefen[0].two2bian = true;
				}
				this.two2_two3(index, items.onefen[0], 0)
			},
			two2_two3(dataindex, item, index2) {

				let p;
				for (p of this.sum[dataindex]['onefen']) {
					p.two2bian = false;
				}
				item.two2bian = true;
				this.strindex = index2;
				this.show = []
				for (let i = 0; i < item.str.length; i++) {
					this.show[i] = true
				}
			},
			cs(sd) {
				console.log(sd)
			},
			async loadData1() {
				await this.getData()
				this.two1_two2(this.sum[0], 0)
			},
			getData: function() {
				uni.showLoading({
					title: '数据加载中'
				});
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://anmti.cn/cantlogin/getNavData',
						method: 'GET',
						success: (res) => {
							this.sum = res.data
							resolve('suc');
							uni.hideLoading();
						},
						fail: (err) => {
							reject('err');
							uni.$showMsg('加载失败')
							uni.hideLoading();
						}
					})
				})
			},
			handleFold: function(strindex) {
				this.show[strindex] = !this.show[strindex]
				this.$forceUpdate()
			}


		},
		onLoad() {
			this.loadData1()

		},
		created() {
			this.sum.forEach((i, index) => {
				i.onefen.forEach((i2, index2) => {
					i2.str.forEach((i3, index3) => {
						i3.threestr = i3.threestr.split('\n');
						i3.threestr = i3.threestr.join("");
						i3.threestr = i3.threestr.split('\r');
						i3.threestr = i3.threestr.join("");
					})
				})
			})
		}

	}
</script>
<style>
	.one {
		display: flex;
		padding-top: 12px;

	}

	.two1 {
		font-weight: bolder;
		background-color: #FFFFFF;
		/* color: #545454; */
		color: rgb(240, 91, 114);
		width: 35%;
		height: 36px;
		/* border: 2px solid rgb(240, 91, 114); */
		border-bottom: none;
		/* border-radius: 15px 15px 0px 0px; */
		/* margin-left: 15px; */
		line-height: 30px;
		text-align: center;
	}

	.two2 {
		padding-top: 10px;
		display: flex;
		height: 70px;
		width: 100%;
		/* background-color: rgb(240, 91, 114); */
		opacity: 0.8;
		align-items: center;
	}

	.two2_1 {
		color: rgb(240, 91, 114);
		/* color: #545454; */
		margin-top: 30px;
		/* padding: 0px 10px; */
		height: 100px;
		width: 60px;
		/* background-color: #FFFFFF; */
		margin-left: 5%;
		text-align: center;
		line-height: 30px;
		border-radius: 12px;

		/* margin-bottom: 30px; */
	}

	.two2_2 {
		width: 48px;
		height: 48px;
	}

	.two2_1 img {
		height: 36px;
		width: 36px;
		margin-top: 10px;

	}

	.three {
		width: 90%;
		/* height:200px; */
		border: 10px solid white;
		background-color: white;
		background-image: url('https://s1.ax1x.com/2022/05/09/OJTixP.png');
		/* opacity: 0.5; */
		/* https://s1.ax1x.com/2022/05/09/OJLfDx.png */
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: 30px;
		margin-left: 5%;
	}

	.three0 {
		width: 90%;
		/* height:200px; */
		border: 10px solid white;
		background-color: white;
		background-image: url('https://s1.ax1x.com/2022/05/09/OJLfDx.png');
		/* opacity: 0.5; */
		/* https://s1.ax1x.com/2022/05/09/OJLfDx.png */
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: 20px;
		margin-left: 5%;
	}

	.three1 {
		height: 40px;
		display: flex;
	}

	.three1_1 {
		display: inline-block;
		/* width: 60%; */
		color: white;
		padding: 0 30rpx;
		text-align: left;
		line-height: 76rpx;
		background-color: rgba(240, 91, 114, 0.5);
		font-weight:550;
		border-bottom-right-radius: 15px;

	}

	.three1_2 {
		flex: 1;
		background-color: #f5f5f5;
		width: 50px;
	}

	.three2 {
		/* background-color: white; */
		padding: 10px;
		padding-top: 120px;
		color: rgb(17, 16, 16);
		line-height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.three2 span {
		width: 80%;
		height: 100%;
		margin-top: 160px;
		letter-spacing: 4px;
		font-size: 26rpx;
		color: 	#545454;
	}

	.three3 {
		/* background-color: white; */
		padding: 10px;
		padding-top: 130px;
		color: rgba(17, 16, 16,.5);
		line-height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 50;
		overflow: hidden;
		letter-spacing: 4px;
		color: 	#545454;
		font-size: 26rpx;
	}

	.three3 span {
		width: 80%;
		height: 100%;
		margin-top: 160px;
	}

	/* .three2 span {
		display: inline-block;
		padding: 0 16px;
	} */
	.three4 {
		/* width: 40px; */
		height: 40px;
		padding-left: 45%;
	}

	.three4 img {
		width: 32px;
		height: 32px;

	}

	.three1_2_1 {
		height: 90%;
		width: 50px;
		margin-right: 5px;
	}

	.right {
		float: right;
	}

	.left {
		float: left;
	}

	image {
		width: 120%;
		height: 120%;
	}

	.two1bian {
		color: #FFFFFF;
		background-color: pink;
		border-bottom: 2px solid rgb(240, 91, 114);
		/* background-color: rgb(240, 91, 114); */
	}

	.two2bian {
		border: 1px solid white;
		border-radius: 25%;
		background-color: #5555ff;
		/* color: #FFFFFF; */
		font-weight: bolder;
	}

	.two2bian1 {
		border: 1px solid white;
		border-radius: 25%;
		background-color: #ff557f;
		/* color: #FFFFFF; */
		font-weight: bolder;
	}
</style>
